<template>
 
     <div class="container">  
        <el-row class="top-btn">
            <el-button color="#1c84c6" class="handle-btn"  @click="rollback">返回</el-button>
        </el-row>
        <el-row>
            <!-- <el-text class="text-title">班级名称:{{ $route.query.className }}</el-text> -->
            <el-text class="text-title">Java核心技术(一)</el-text>
        </el-row>
        <el-divider/>
        <div class="div-content">
            <el-text class="lead">课程介绍</el-text>
            <div class="div-blue" ></div>
        </div>
        <div class="ibox">
            <h5 class="lead">
                本视频教程采用由浅入深、与实际应用紧密结合的方式，利用大量经典实用的实例，
                详细讲解Java面向对象的编程思想、编程语法和设计模式，介绍常见Java类库的用法，
                总结优化Java编程的各种宝贵经验，深入阐述Java虚拟机执行Java程序的原理。本视
                频教程的实例都基于*新的JDK8版本。本视频教程的*大特色是以6条主线贯穿视频教程：
                面向对象编程思想、Java语言的语法、Java虚拟机执行Java程序的原理、在实际项目中的运用、
                设计模式和性能优化技巧。另外，本视频教程还贯穿了Oracle公司的OCJP（Oracle Certified Java Programmer）
                认证的考试要点。
            </h5>
        </div>
        <div class="div-content">
            <el-text class="lead">课程章节</el-text>
            <el-row class="top-btn"><el-button color="#1c84c6"  style="height: 22px; width: 80px;"  @click="addChapter">添加章节</el-button> </el-row>
            <div class="div-blue" ></div>
       
        
        </div>
        <div>
            <el-tree :data="zNodes" :props="defaultProps"  node-key="id"  :default-expanded-keys="[1]">
                <template #default="{ node }">
                <i :class="checkIconByNodeLevel(node)"  > </i>
                <span >{{ node.label }}</span>
                </template>
            </el-tree>
        </div>
                                                 
     

        </div>

</template>

<script setup>
import {ref,reactive,toRefs} from 'vue'

let props = defineProps({
         flagCourse:Boolean,
    })
const {flagCourse} = toRefs(props)
const emit = defineEmits(['update:flagCourse'])
const rollback=()=>{
     emit('update:flagCourse',false)
}   
//树状结构
const defaultProps = {
  children: 'nodes',
  label: 'name',
}
//课程章节
var zNodes =ref([
        {
            id: 1,
            pId: 0,
            name: "第一章：java语言概述",
            open: true,
            //icon: '../../static/js/plugins/ztree/css/bootstrapStyle/img/video.png'
            nodes:[
            {id: 101, pId: 1, name: "Java语言的发展——1-java简介.mp4"},
            {id: 102, pId: 1, name: "Java的发展历史以及版本的特性——Java的发展历史以及版本的特性.mp4"},
            {id: 103, pId: 1, name: "JDK下载、安装、配置——JDK下载、安装、配置.mp4"},
            {id: 104, pId: 1, name: "命令、文件系统，案例——Windows命令、文件系统，Hello.java案例.mp4"},
            {id: 105, pId: 1, name: "包、导入、标识符—— 包、导入、标识符.mp4"},

            ]
        },
       
        {id: 2, pId: 0, name: "第2章：JDK下载、安装、配置", open: false,
            nodes:[
            {id: 201, pId: 2, name: "Java语言的发展——1-java简介.mp4"},
                {id: 202, pId: 2, name: "Java的发展历史以及版本的特性——Java的发展历史以及版本的特性.mp4"},
                {id: 203, pId: 2, name: "JDK下载、安装、配置——JDK下载、安装、配置.mp4"},
                {id: 204, pId: 2, name: "命令、文件系统，案例——Windows命令、文件系统，Hello.java案例.mp4"},
                {id: 205, pId: 2, name: "包、导入、标识符—— 包、导入、标识符.mp4"},
            ]},
       

        {id: 3, pId: 0, name: "第 3 章：包、导入、标识符", open: false ,
            nodes:[
            {id: 301, pId: 3, name: "Java语言的发展——1-java简介.mp4"},
            {id: 302, pId: 3, name: "Java的发展历史以及版本的特性——Java的发展历史以及版本的特性.mp4"},
            {id: 303, pId: 3, name: "JDK下载、安装、配置——JDK下载、安装、配置.mp4"},
            {id: 304, pId: 3, name: "命令、文件系统，案例——Windows命令、文件系统，Hello.java案例.mp4"},
            {id: 305, pId: 3, name: "包、导入、标识符—— 包、导入、标识符.mp4"},
            ]
    },
       

    ])

// 根据节点层级显示不同的图标
const checkIconByNodeLevel = ( node) => {
	if (node.childNodes.length == 0) {
		return 'iconfont icon-a-24gl-fileEmpty';
	} else {
		if (node.expanded) {
			return 'iconfont icon-folder-open';
		}
		return 'iconfont icon-foldero';
	}
}

/***********添加章节******** */
let  indx = zNodes.value.length
const addChapter = ()=>{
    zNodes.value.push( {
            id: indx++,
            pId: 0,
            name: "新章节",
            open:true,
            nodes:[]  
        })
}

</script >
<style lang="less" scoped>
  .top-btn{
      float: right;
      padding-right: 65px;
   }
   .lead{
      font-size: 14px;
      padding-left: 20px; 
      font-weight: 300;
    //   color: #676a6c;;
      color: #676a6c;
      line-height: 1.4;
    }

 .text-title{
      font-size: 16px;
      font-weight: 600;
   }
.div-content{
    border-bottom: 1px solid #e7eaec;
    margin-top: 20px;
    margin-bottom: 20px;
} 
.div-blue{
    width: 90px;height: 4px; 
    background-color: #1a7bb9;
    margin-left: 20px;
}
   .bg {
        width: 152px;
        height: 0;
        background: #2f4050;;
        position: absolute;
        left: 4px;
        top: 56px;
        z-index: 1;
        overflow: hidden;
    }
 
    /deep/ .el-tree-node__content {
    padding: 0 !important;
  }
  /deep/ .el-tree-node {
    position: relative;
    padding-left: 16px;
  }
  /deep/ .el-tree-node__children {
    padding-left: 16px;
  }
 
  // 竖线
  /deep/ .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #52627c;
  }
 
  /deep/ .el-tree-node:last-child::before {
    height: 38px; 
  }
 
  // 横线
  /deep/ .el-tree-node::after {
    content: "";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #52627c;
  }
 
  /deep/ & > .el-tree-node::after {
    border-top: none;
  }
  /deep/ & > .el-tree-node::before {
    border-left: none;
  }
 
  /deep/ .el-tree-node__expand-icon {
    font-size: 16px;
  }


</style>